<template>
  <el-form label-width="100px">
      <el-form-item label="SPU名称">
        <el-input placeholder="请你输入SPU名称" v-model="SpuParams.spuName"></el-input>
      </el-form-item>
      <el-form-item label="SPU品牌">
          <el-select v-model="SpuParams.tmId">
              <el-option v-for="(item, index) in  AllTradeMark" :key="item.id" :label="item.tmName"
                  :value="item.id"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input type="textarea" placeholder="请你输入SPU描述" v-model="SpuParams.description"></el-input>
      </el-form-item>
      <el-form-item label="SPU图片">
        <!-- 
          v-model:file-list:展示默认图片 
          action:上传图片的接口地址
          list-type:文件列表的类型
         -->
        <el-upload
          v-model:file-list="ImgList"
          action="/api/admin/product/fileUpload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :before-upload="handlerUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" style="width:100%;height:100%;"/>
        </el-dialog>
      </el-form-item>
      <el-form-item label="SPU销售属性">
        <!-- 展示销售属性的下拉菜单 -->
        <el-select v-model="saleAtrrIdAndValueName" :placeholder="unSelectSaleAttr.length?`还未选择的有${unSelectSaleAttr.length}个`:'无'">
            <el-option :value="`${item.id}:${item.name}`" v-for="(item,index) in unSelectSaleAttr" :key="item.id" :label="item.name"></el-option>
        </el-select>
        <el-button type="primary" icon="plus" style="margin-left:10px;" :disabled="saleAtrrIdAndValueName?false:true" @click="addSaleAttr">添加属性</el-button>
        <!-- table展示销售属性与属性值的地方 -->
         <el-table style="margin:10px 0px;" border :data="saleAttr">
             <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
              <el-table-column prop="saleAttrName" label="属性名" width="120px"></el-table-column>
              <el-table-column prop="prop" label="属性值">
                <!-- row:即为当前SPU已有的销售属性对象 -->
                <template #="{row,$index}"> 
                  <el-tag style="margin:0 5px;" @close="row.spuSaleAttrValueList.splice(index,1)" v-for="(item,index) in row.spuSaleAttrValueList" :key="item.id" class="mx-1" closable>
                    {{ item.saleAttrValueName }}
                  </el-tag>
                  <el-input @blur="toLook(row)" v-model="row.saleAttrValue" v-if="row.flag==true" placeholder="请你出入属性值" size="small" style="width:100px;"></el-input>
                  <el-button v-else size="small" icon="plus" @click="toEdit(row)"></el-button>
                </template>
              </el-table-column>
              <el-table-column prop="prop" label="操作" width="120px">
                <template #="{row,$index}">
                  <el-button type="danger" icon="delete" size="small" @click="saleAttr.splice($index,1)"></el-button>
                </template>
              </el-table-column>
            </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save" :disabled="saleAttr.length>0?false:true">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {ref,computed} from 'vue'
let $emit = defineEmits(['changScene'])
import type {SaleAtrrValue,SaleAttr,HasSaleAttr,SpuData,AllTradeMark,SpuHasImg,SaleAttrResponseData,HasSaleAttrResponseData,TradeMark,SpuImg} from '@/api/product/spu/type'
import {reqAllTradeMark,reqSpuImageList,reqSpuHasSaleAttr,reqAllSaleAttr,reqAddOrUpdateSpu } from '@/api/product/spu'
import { ElMessage } from 'element-plus';
// 点击取消按钮通知父组件切换场景为0去展示已有的SPU数据
const cancel = ()=>{
  $emit('changScene',{flag:0,params:'update'})
}
8
// 存储已有的SPU这些数据
let AllTradeMark = ref<TradeMark[]>([])
// 商品图片
let ImgList = ref<SpuImg[]>([])
// SPU已有的销售属性
let saleAttr = ref<SaleAttr[]>([])
// 全部的销售属性
let allSaleAttr = ref<HasSaleAttr[]>([])

// 控制对话框的显示与隐藏
let dialogVisible = ref<boolean>(false)
// 存储预览图片的地址
let dialogImageUrl = ref<string>('')

// 将来收集还未选择的销售属性ID与属性名
let saleAtrrIdAndValueName = ref<string>('')

// 存储已有的SPU对象
let SpuParams = ref<SpuData>({
  category3Id: "", //三级分类的id
  spuName: "", //SPU名字
  description: "", //SPU描述
  tmId: '', //品牌的id
  spuImageList: [],
  spuSaleAttrList: []
})

const initHasSpuData= async (spu:SpuData)=>{
  // 存储已有的SPU对象 将来在模板中展示
  SpuParams.value = spu
  // console.log(spu)
  // spu：即为父组件传递过来的已有的SPU对象[不完整]
  // 获取全部的品牌数据
  let result:AllTradeMark = await reqAllTradeMark()
  // console.log(result)
  // 获取某一个品牌旗下全部售卖商品图片
  let result1:SpuHasImg = await reqSpuImageList(spu.id)
  // console.log(result1)
  // 获取已有的SPU销售属性的数据
  let result2:SaleAttrResponseData = await reqSpuHasSaleAttr(spu.id)
  // console.log(result2)
  // 获取整个项目全部SPU的销售属性
  let result3:HasSaleAttrResponseData = await reqAllSaleAttr()
  // console.log(result3)
  // 存储全部品牌的数据
  AllTradeMark.value = result.data
  // SPU对应商品图片
  ImgList.value = result1.data.map(item=>{
    return {
      name:item.imgName,
      url:item.imgUrl
    }
  })
  // 存储已有的SPU的销售属性
  saleAttr.value = result2.data
  // 存储全部的销售属性
  allSaleAttr.value = result3.data
}


// 照片墙点击预览按钮触发的钩子
const handlePictureCardPreview =(file:any)=>{
  // console.log(file)
  dialogImageUrl.value = file.url
  // 对话框弹出来
  dialogVisible.value = true
}

// 照片墙删除文件的钩子
const handleRemove = ()=>{
 console.log(888)
}
// 照片墙上传成功之前的钩子 约束文件的大小与类型
const handlerUpload =(file:any)=>{
  // console.log(file)
  if(file.type=='image/png'||file.type=='image/jpeg'||file.type=='image/gif'){
    if(file.size/1024/1024<3){
      return true
    }else{
        ElMessage({
        type:'error',
        message:'上传的文件大小务必在3M以内'
      })
      return false
    }
  }else{
    ElMessage({
      type:'error',
      message:'上传的文件务必是PNG|JPG|GIF'
    })
    return false
  }
}

// 计算出当前SPU还未拥有的销售属性
let unSelectSaleAttr = computed(()=>{
  // 全部销售属性：颜色、版本、尺码
  let unSelectArr = allSaleAttr.value.filter(item=>{
    return saleAttr.value.every(item1=>{
      return item.name!=item1.saleAttrName
    })
  })
  return unSelectArr
})

// 添加销售属性的方法
const addSaleAttr=()=>{
  /* baseSaleAttrId:number,
  saleAttrName:string,
  spuSaleAttrValueList:SpuSaleAttrValueList */
  const [baseSaleAttrId,saleAttrName] = saleAtrrIdAndValueName.value.split(':')
  // 准备一个新的销售对象：将来带给服务器即可
  let newSaleAttr:SaleAttr = {
    baseSaleAttrId,
    saleAttrName,
    spuSaleAttrValueList:[]
  }
  // 追加到数组当中
  saleAttr.value.push(newSaleAttr)
  // 清空收集的数据
  saleAtrrIdAndValueName.value = ''
}

//属性值按钮的点击事件
const toEdit = (row:SaleAttr)=>{
  // 点击按钮的时候，input组件出现->编辑模式
  row.flag = true
  row.saleAttrValue = ''
}

// 表单元素失去焦点的时间的回调
const toLook=(row:SaleAttr)=>{
  // console.log(row)
  // 整理收集的属性的ID与属性值的名字
  const {baseSaleAttrId,saleAttrValue} = row
  //整理成服务器需要的属性值形式
   let newSaleAttrValue:SaleAtrrValue = {
    baseSaleAttrId,
    saleAttrValueName:(saleAttrValue as string)
   }

  //非法情况判断
  if((saleAttrValue as string).trim()==''){
    ElMessage({
      type:'error',
      message:'属性值不能为空'
    })
    return 
  }
  // 判断属性值是否在数组当中存在
  let repeat = row.spuSaleAttrValueList.find(item=>{
    return item.saleAttrValueName == saleAttrValue
  })
  if(repeat) {
    ElMessage({
      type:'error',
      message:'属性值重复'
    })
    return
  }

  // 追加新的属性值
   row.spuSaleAttrValueList.push(newSaleAttrValue)
  //  切换为查看模式
  row.flag=false
}

// 保存按钮的回调
const save = async()=>{
  // 整理参数
  // 1.照片墙的数据
  SpuParams.value.spuImageList=ImgList.value.map((item:any)=>{
    return {
      imgName:item.name,  //图片名字
      imgUrl:(item.response&&item.response.data)||item.url
    }
  })
  // 2.整理销售属性的数据
  SpuParams.value.spuSaleAttrList = saleAttr.value

  // 发请求：添加SPU|更新已有的SPU
  let result = await reqAddOrUpdateSpu(SpuParams.value)
 
  // 成功
  if(result.code==200){
    ElMessage({
      type:'success',
      message:SpuParams.value.id?'更新成功':'添加成功'
    })
    // 通知父组件切换场景为0
    $emit('changScene',{flag:0,params:SpuParams.value.id?'update':'add'})
  }else{
    // 失败
    ElMessage({
      type:'error',
      message:SpuParams.value.id?'更新失败':'添加失败'
    })
  }
}

// 添加一个新的SPU初始化请求的方法
const initAddSpu = async(c3Id:number|string)=>{
  // 清空数据
  Object.assign(SpuParams.value,{
    category3Id: "", //三级分类的id
    spuName: "", //SPU名字
    description: "", //SPU描述
    tmId: '', //品牌的id
    spuImageList: [],
    spuSaleAttrList: []
  })
  // 清空照片墙
  ImgList.value = []
  // 清空销售属性
  saleAttr.value = []
  saleAtrrIdAndValueName.value = ''

  // 存储三级分类的id
  SpuParams.value.category3Id = c3Id 
  // 获取全部的品牌数据
  let result:AllTradeMark = await reqAllTradeMark()
  // 获取整个项目全部SPU的销售属性
  let result1:HasSaleAttrResponseData = await reqAllSaleAttr()
  // 存储数据
  AllTradeMark.value = result.data
  allSaleAttr.value = result1.data
}
// 对外暴漏
defineExpose({initHasSpuData,initAddSpu})
</script>

<style scoped>
.el-select{
  width:220px;
}
</style>